// 导入
const gulp = require('gulp')    //gulp模块，用于创建任务
const uglify = require('gulp-uglify')   //压缩js 去空格
const babel = require('gulp-babel')     //es6转es5
const rev = require('gulp-rev')         //加随机名
const revCollector = require('gulp-rev-collector')  //替换html引入的js
const clean = require('gulp-clean')     //删除目录文件
const minifyCss = require('gulp-minify-css')    //压缩css  去空格去注释
const imagemin = require('gulp-imagemin')       //压缩图片
const htmlmin = require('gulp-htmlmin')     //压缩html去空格


// 清除目录
gulp.task('clean',over =>{
    const fs = require('fs');
    if (fs.existsSync('dist/'))
    {
        gulp.src('dist/',{read: false})
        .pipe(clean());
    } 

    setTimeout(() => { // 因为clean这里面的代码都是异步的
        over()
    }, 2000)
})

// 打包js任务
gulp.task('js',over =>{
    gulp.src('./src/js/*.js')

        .pipe(uglify())
        .pipe(babel({"presets": ["env"]}))
        .pipe(rev())
        .pipe(gulp.dest('./dist/js/'))

        .pipe(rev.manifest())
	    .pipe(gulp.dest('temp/js'))

    over()
})

// 打包css

gulp.task('css',over =>{
    gulp.src('./src/css/*.css')
        .pipe(minifyCss())
        .pipe(rev())
        .pipe(gulp.dest('./dist/css/'))

        .pipe(rev.manifest())
        .pipe(gulp.dest('temp/css'))
    over()
})

// 打包img
gulp.task('imgs',over =>{
    gulp.src('./src/imgs/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/imgs/'))

    setTimeout(() => {
        over()
    }, 30000);//30s
})

// 打包HTML任务
gulp.task('html',over =>{

    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS 
        minifyCSS: true//压缩页面CSS
    };

    gulp.src(['temp/**/*.json','./src/*.html'])
        .pipe(htmlmin(options))
        .pipe(gulp.dest('./dist/'))

    over()
})

// 批量打包
gulp.task('build',gulp.series('clean','js','css','imgs','html',() =>{
    console.log('bulid打包完成');
    
}))

// 服务器
const server = require('browser-sync').create(); 
const watch = require('gulp-watch'); 
const { createProxyMiddleware } = require('http-proxy-middleware');

gulp.task('serve', () => {
    
    server.init({
        server: {
            baseDir: './src',
            middleware: [
                 // ...
                 createProxyMiddleware('/api', { 
                    // 目标服务器网址
                    target: "http://kg.zhaodashen.cn/v1/",
                    changeOrigin: true, // 是否允许跨域
                    secure: false,      // 关闭SSL证书验证https协议接口需要改成true
                    pathRewrite: {      // 重写路径请求
                        // 移除
                        // '^/remove/api' : ''
                        '/api':''
                    },
                 })
            ]
          },
        port: 80
    })

    // 监控文件修改
    watch('src/*.html', function() {
        console.log('你修改HTML文件了')
        server.reload()
    })
    watch('src/style/*.css', function() {
        console.log('你修改CSS文件了')
        server.reload()
    }) 
    watch('src/js/*.js', function() {
        console.log('你修改JS文件了')
        server.reload()
    })
})